<template>
  <div class="sport">
    <mt-navbar v-model="selected">
      <mt-tab-item id="one">娱乐生活</mt-tab-item>
      <mt-tab-item id="two">公司环境</mt-tab-item>
      <mt-tab-item id="three">员工风采</mt-tab-item>
    </mt-navbar>
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="one">  
        <div class="box">
           <h3>海报烧烤</h3>
           <div class="box_img">
             <img src="../../../static/images/sport_01.jpg" alt="">
           </div>  
           <div class="box_img">
             <img src="../../../static/images/sport_01.jpg" alt="">
           </div>

           <h3>足球比赛</h3>
           <div class="box_img">
             <img src="../../../static/images/sport_02.jpg" alt="">
           </div>  
           <div class="box_img">
             <img src="../../../static/images/sport_02.jpg" alt="">
           </div>              
         </div>
         
      </mt-tab-container-item>
      <mt-tab-container-item id="two">
     <div class="box">
           <h3>公司环境</h3>
           <div class="box_img">
             <img src="../../../static/images/sport_01.jpg" alt="">
           </div>  
           <div class="box_img">
             <img src="../../../static/images/sport_01.jpg" alt="">
           </div>

           <h3>足球比赛</h3>
           <div class="box_img">
             <img src="../../../static/images/sport_02.jpg" alt="">
           </div>  
           <div class="box_img">
             <img src="../../../static/images/sport_02.jpg" alt="">
           </div>              
         </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="three">
      <div class="box">
           <h3>员工风采</h3>
           <div class="box_img">
             <img src="../../../static/images/sport_01.jpg" alt="">
           </div>  
           <div class="box_img">
             <img src="../../../static/images/sport_01.jpg" alt="">
           </div>

           <h3>足球比赛</h3>
           <div class="box_img">
             <img src="../../../static/images/sport_02.jpg" alt="">
           </div>  
           <div class="box_img">
             <img src="../../../static/images/sport_02.jpg" alt="">
           </div>              
         </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Welcome to about',
      selected:'one'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .sport{
      width:100%;
      height: auto;
      /* border: 1px solid red; */
          
    }
    .box{
      /* border: 1px solid red; */
      width: 100%;
      height: 100%;
     
    }
    .box h3{
      margin-left: 10px;
    }
    .box .box_img{
      margin: 10px;
    }
    .box img{
      width: 100%;
      height: 100%;
     
    }
    
</style>
